<template>
  <div class="h-full bg-grey">
    <!-- 选择商品分类 -->
    <van-popup
      :close-on-click-overlay="false"
      v-model="chooseGoodsTypeShow"
      round
      position="bottom"
      class="h-p-90"
    >
      <choose-type :types="chooseGoodsTypes" @close="closeChooseType()"></choose-type>
    </van-popup>
    <!-- 导航 -->
    <van-nav-bar class="bg-red text-white sticky top-0" title="商品">
      <van-icon class="fs-18" name="scan" slot="left" />
      <router-link tag="div" to="/goods/add" slot="right">
        <van-icon class="fs-18" name="plus" />
      </router-link>
    </van-nav-bar>
    <!-- 公告 -->
    <van-skeleton title title-width="100%" :loading="!notice" class="p-h-20 p-10 m-b-10 bg-white">
      <div class="flex fs-14 p-h-20 p-10 bg-white overflow-omit">
        <span class="text-red">
          <svg-icon class="m-r-5" name="gonggao" />公告:
        </span>
        <div class="flex-1 h-20 o-hidden">
          <van-swipe
            :touchable="false"
            :show-indicators="false"
            :autoplay="3000"
            :vertical="true"
            :height="20"
          >
            <van-swipe-item v-for="item in notice" :key="item.id">
              <router-link
                tag="p"
                :to="`/notice/detail/${item.id}`"
                class="text-content fs-14 m-l-5 overflow-omit"
              >{{item.title}}</router-link>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </van-skeleton>
    <!-- 商家商品 -->
    <van-tabs sticky :offset-top="46" @change="handleTypeChange" swipeable>
      <van-tab v-for="item in types" :key="item.id" :title="item.gtype">
        <van-skeleton title :row="3" :loading="!ready" class="m-t-20">
          <van-list
            v-model="listControl.loading"
            :finished="listControl.pages === 0 || listPage.current === listControl.pages"
            finished-text="没有更多了"
            @load="getMoreData()"
            :immediate-check="false"
          >
            <goods-list :list="list" @changeGoodsStatus="changeGoodsStatus"></goods-list>
          </van-list>
        </van-skeleton>
        <empty-data class="text-center m-t-20" v-if="!list.length && ready" content="暂无数据"></empty-data>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import GoodsList from '@/views/Goods/components/GoodsList'
import ChooseType from '@/views/Goods/components/ChooseType'
export default {
  data () {
    return {
      ready: false,
      chooseGoodsTypeShow: false,
      notice: null,
      typeName: '',
      types: [], // 商家当前的商品分类
      chooseGoodsTypes: [], // 选择所有的分类列表
      list: [],
      listPage: {
        size: 10,
        current: 1
      },
      listControl: {
        pages: null,
        loading: false
      }
    }
  },
  components: {
    GoodsList,
    ChooseType
  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      await this.getNotice()
      await this.getGoodsTypes()
      this.getGoods()
    },
    closeChooseType () {
      this.chooseGoodsTypeShow = false
    },
    async getNotice () {
      let { oaNotifyList } = await this.$api.post('/notify/query', {})
      this.notice = oaNotifyList
    },
    async getGoodsTypes () {
      let { status, zxBsGtList } = await this.$api.post('/bsGt/query', {
        bid: this.user.userInfo.id
      })
      if (status === 401) return
      this.types = zxBsGtList
      this.typeName = this.types[0].gtype
      this.checkType()
    },
    async getChooseGoodsTypes () {
      // 如果商品分类为空时获取所有商品分类供商家选择
      let { zxGdTypeList } = await this.$api.post('/gd/type/query', {})
      this.chooseGoodsTypes = zxGdTypeList
    },
    async handleTypeChange (item) {
      this.list = []
      this.listPage = {
        size: 10,
        current: 1
      }
      this.listControl = {
        pages: null,
        loading: false
      }
      this.ready = false
      this.typeName = this.types[item].gtype
      await this.getGoods()
      this.ready = true
    },
    async getGoods () {
      this.listControl.loading = true
      let { page } = await this.$api.post('/zxGd/query', {
        bid: this.user.userInfo.id,
        current: this.listPage.current,
        size: 10,
        gtype: this.typeName
      })
      this.list = [...this.list, ...page.records]
      this.listPage.current = page.current
      this.listControl.pages = page.pages
      this.listControl.loading = false
      this.ready = true
    },
    getMoreData (title) {
      this.listPage.current++
      this.getGoods()
    },
    checkType () {
      if (!this.types.length) {
        this.chooseGoodsTypeShow = true
        this.getChooseGoodsTypes()
      }
    },
    changeGoodsStatus ({ id, status }) {
      this.list.forEach(d => {
        if (d.id === id) {
          d.status = status
        }
      })
    }
  },
  computed: {
    ...mapState(['user'])
  }
}
</script>

<style lang="scss" scoped>
.van-nav-bar .van-icon {
  color: #fff !important;
}
.van-nav-bar__title {
  color: #fff !important;
}
.van-hairline--bottom::after {
  border: none;
}
</style>
